// 配置路由
// 1、引入
import VueRouter from "vue-router"
import Vue from "vue"
// 2、注册两个全局组件，router-link和router-view
Vue.use(VueRouter)

// 3、创建路由规则
// import .. from ... 这种方式引入组件，一次引入了多少个组件，那么就一次性加载多少个组件
const routes = [
    {
        path: "/",
        // 重定向，表示当用户直接访问localhost:8080的时候强制跳转到登录页面。
        redirect: "/login" 
    },
    {
        path: "/login",
        // 按需引入组件，也就是当用户访问到login页面的时候才加载login.vue组件
        component: ()=>import("../views/login.vue") 
    },
    {
        path: "/register",
        component: ()=>import("@/views/register.vue")
    },
    {
        path: "/personal",
        component: ()=>import("@/views/personal.vue")
    },
    {
        path: "/edit_profile",
        component: ()=>import("@/views/edit_profile.vue")
    },
    {
        path: "/index",
        component: ()=>import("@/views/index.vue"),
        meta: { 
            // meta我们叫他“路由元信息”，
            // 他可以用来保存数据，且路由跳转的时候这里的数据不会被重置
            curIndex: localStorage.getItem("75-token")?1:0
        }
    },
    {
        path: "/articleDetail",
        component: ()=>import("@/views/articleDetail.vue")
    },
    {
        path: "/commentList",
        component: ()=>import("@/views/commentList.vue")
    },
    {
        path: "/myFollow",
        component: ()=>import("@/views/myFollow.vue")
    },
    {
        path: "/myStar",
        component: ()=>import("@/views/myStar.vue")
    },
    {
        path: "/category",
        component: ()=>import("@/views/category.vue")
    },
    {
        path: "/search",
        component: ()=>import("@/views/search.vue")
    }
]


// 4、根据路由规则生成路由对象
const router = new VueRouter({
    // routes: routes  注意：键名routes不能修改，键值routes可以修改，
    // 但是我们一般取一样的名字，方便使用简写。
    routes
})

// 重复跳转同一个路由地址导致报错问题的解决方法
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => err);
}

// 导航守卫（路由守卫）
// 导航守卫（路由守卫）是什么？答：就是路由跳转之前会触发的一个函数
// 这个函数就是beforeEach
/**
 * 语法：
 * router.beforeEach((to, from, next)=>{
 *  to: 指的跳转的目标路由对象，里面有一个属性to.path就是我们跳转的路径
 *  from: 指当前的路由对象，里面有一个属性from.path就是当前的路由路径
 *  next: 表示是否放行的函数
 *       next() 表示放行
 *       next(false) 表示不放行
 *       next(路由路径) 表示跳转指定的路由路径
 * })
 * 
 * 使用场景：可以做页面(路由)权限
 * 黑马头条项目中：个人中心必须要登录后才能访问，就是可以使用到导航守卫来实现此功能
 *      条件一：用户访问的是“个人中心”  to.path
 *      条件二：用户是否登录    token ---> localstorage
 * 
*/
// 白名单，所有在白名单中的路径都表示需要登录后才能访问的页面路径
let writeArr = [ "/personal", "/edit_profile", "/category" ] 
router.beforeEach((to, from ,next)=>{
    let token = localStorage.getItem("75-token")
    // 当用户跳转的页面为“个人中心”且 没有登录的时候 ，跳转到登录页面，否则直接放行
    // if(to.path == "/personal" && !token || to.path === "/edit_profile"&&!token){
    // 判断到to.path的值在writeArr数组中的时候，说明跳转的目标路由路径必须登录才能访问的。
    if(writeArr.indexOf(to.path) != -1 && !token ){
        next("/login")
    }else{
        // 当用户访问的页面是登录页面且已经是登录状态了，则让他跳转到首页
        if(to.path == "/login"&&token){
            next("/index")
        }else{
            // 因为首页栏目，未登录没有“关注”栏目的，登录后才有“关注”栏目
            // 因此登录后栏目的数组长度会发生变化，会导致原来访问的栏目的下标值会加1
            // 因此，我们用来控制栏目高亮效果的变量curIndex的值也要加1
            // 正常业务我们退出登录后应该需要重置栏目的下标值，因此curIndex的值不需要加1了，直接重置即可 
            // if(localStorage.getItem("75-token")&&from.path == "/login"){
            //     to.meta.curIndex++
            // }
            if(to.path == "/login"){
                // console.log(120);
                // 退出登录后 重置首页中curIndex的值
                router.options.routes[5].meta.curIndex = 1
            }
            if(to.path == "/index"&&from.path=="/login"){
                // console.log(120);
                // 设置从登录页到首页下标值初始值
                router.options.routes[5].meta.curIndex = token?1:0
            }
            next()
        }
    }
})


// 5、导出 路由对象
export default router